<template>
	<view class="page">

		<!-- 背景 -->
		<image class="page-bg" mode="widthFix" :src="imageUrl +'list/g-bg.jpg'"></image>

		<!-- 头部 -->
		<u-sticky offset-top="0" :bgColor="bgColor">
			<u-navbar leftText="门店详情" title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
				:bgColor="bgColor"></u-navbar>
		</u-sticky>

		<!-- 主内容 -->
		<view class="page-content">
			<view class="wp">
				<view class="box-hg5">
					<image class="pic" mode="widthFix" :src="imageUrl +'hg-p2.jpg'"></image>
					<view class="t1">{{item.name}}</view>
					<view class="t2">
						<view class="t2-item">
							<image class="icon" mode="widthFix" :src="imageUrl +'hg-tel1.png'"></image>
							<view v-for="(key, i) in item.phone" :key="i" @click="callPhone(item.phone[i])">
								{{ key }} <text v-if="i < item.phone.length - 1" class="sep"> | </text>
							</view>
						</view>
					</view>
					<view class="t3"  @click="daohang">
						<image class="bg" mode="widthFix" :src="imageUrl +'hg-bg10.png'"></image>
						<view class="left">
							<image class="icon" mode="widthFix" :src="imageUrl +'hg-addr1.png'"></image>
							{{item.address}}
						</view>
						<view class="right">
							<image class="icon" mode="widthFix" :src="imageUrl +'hg-point2.png'"></image>
							<view class="t3-i1">{{item.parkToUserDistance}}km</view>
						</view>
					</view>
				</view>
				<view class="box-hg6">
					<view class="tit">服务收费</view>
					<view class="item" v-for="(detail, index) in detailList" :key="index">
						<view class="left">{{detail.typeKeyword}}：</view>
						<view class="right">{{detail.prices}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		get
	} from '../../api/myHttps.js';
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',
				item: {},
				detailList: []

			}
		},
		onLoad(options) {
			this.item = JSON.parse(decodeURIComponent(options.item));
			
			this.item.phone = this.item.phone.replace(/，/g, ',').split(',');
			console.log(this.item);
			this.getServiceStoreDetail();
		},
		methods: {
			daohang() {
				console.log("导航");
				uni.openLocation({
					latitude: this.item.latitude,
					longitude: this.item.longitude,
					name: this.item.name,
					address: this.item.address,
					scale: 15,
					success: () => {
						console.log('成功打开地图');
					},
					fail: (err) => {
						console.error('打开地图失败：', err);
					}
				});
			},
			callPhone(phone){
				uni.makePhoneCall({
				  phoneNumber: phone // 支持变量
				})
			},
			getServiceStoreDetail() {
				get('/city-mobile/serviceStore/getServiceStoreDetail?storeId=' + this.item.id).then((res) => {
					this.detailList = res;
				})
			},
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}
	.sep {
	  color: #999;
	  margin: 0 6px; /* 可选：用 margin 控制间距，更灵活 */
	}
</style>